<template>
  <div class="table-page-search-wrapper">
    <a-card :bordered="false" class="card-area">
      <a-form layout="vertical">
        <a-row :gutter="48">
          <a-col :md="6" :sm="12">
            <a-form-item label="学号">
              <a-input v-model="queryParam.xh"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.xm"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="性别">
              <a-select :allowClear="true" v-model="queryParam.xbm">
                <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="院系">
              <a-select :disabled="selectMenu.yx.length === 1" allowClear v-model="queryParam.ssyxm" @change="yxChange"
                        showSearch :filterOption="filterOption">
                <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="专业">
              <a-select allowClear v-model="queryParam.sszym" showSearch :filterOption="filterOption">
                <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{ i.zyh}} {{ i.zymc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="12">
              <a-form-item label="年级">
                <a-select allowClear v-model="queryParam.sznj">
                  <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="国内导师姓名">
                <a-input v-model="queryParam.gndsxm" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="留学国别">
                <a-select allowClear v-model="queryParam.lxgbm">
                  <a-select-option v-for="i in TYPE0015" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
                <a-form-item label="项目状态">
                  <a-select allowClear v-model="queryParam.xmzt">
                    <a-select-option value="0">项目中</a-select-option>
                    <a-select-option value="1">项目结束</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
          </template>
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" style="margin: 0 8px" @click="$refs.table.refresh(true)">查询 </a-button>
              <a-button type="primary" @click="batchShowCheck">批量审核</a-button>
              <!-- <a-button type="primary" @click="exportExcel">导出</a-button> -->
              <a-button
                @click="() => queryParam = {ssyxm: selectMenu.yx.length === 1 ? queryParam.ssyxm : ''}">重置</a-button>
              <a @click="advanced = !advanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <div class="table-page-search-result">
      <s-table
        v-if="initDone"
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :rowSelection="options.rowSelection"
        :pageSize="parameter.pageSize"
        :pageNum="parameter.pageNum"
        :alert="options.alert"
        :scroll="{x: 1600}"
      >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 + (parameter.pageNo - 1) * parameter.pageSize }}
      </span>

        <template slot="xh" slot-scope="a,b">
          <a @click="direct(b)">{{a}}</a>
        </template>
        <template slot="gnds" slot-scope="a,b">
          <span>{{b.teachers?b.teachers.map(item=>item.xm).join(','):''}}</span>
        </template>

        <template slot="operation" slot-scope="a,b">
          <a @click="showCheck(b)">审核</a>
        </template>
      </s-table>
    </div>

    <check-modal
      ref="check"
      :visible="visible"
      :pageType="'gjc'"
      @cancel="visible = false"
      @refresh="$refs.table.refresh(true)"
    />
    <batch-check-modal
      ref="batchCheckModal"
      :batchVisible.sync="batchVisible"
      :pageType="'gjc'"
      @close="() => { batchVisible = false }"
      @save="batchCheck"
    />
  </div>

</template>

<script>
  // import moment from 'moment'
  import {STable} from '~'
  import {mapState} from 'vuex'
  import checkModal from './components/checkModal'
  import batchCheckModal from "./components/batchCheckModal";


  export default {
    name: 'TableList',
    components: {
      STable,
      checkModal,
      batchCheckModal
    },
    data() {
      return {
        // 高级搜索 展开/关闭
        TYPE0073: [],
        advanced: true,
        // 查询参数
        queryParam: {
          xslxm: '',
          xjztm: ''
        },
        postParams: {},
        // 表头
        columns: [
          {
            title: '序号',
            scopedSlots: {customRender: 'serial'},
            width: 60,
          },
          {
            title: '学号',
            dataIndex: 'xh',
            scopedSlots: {customRender: 'xh'},
            width: 120,
          },
          {
            title: '姓名',
            dataIndex: 'xm'
          },
          {
            title: '院系',
            dataIndex: 'ssyxmc'
          },
          {
            title: '专业',
            dataIndex: 'sszymc'
          },
          {
            title: '年级',
            dataIndex: 'sznj'
          },
          {
            title: '留学国别',
            dataIndex: 'lxgbmc'
          },
          {
            title: '国内导师',
            dataIndex: 'dsxm',
            scopedSlots: { customRender: 'gnds' }
          },
          {
            title: '审核状态',
            dataIndex: 'sqztmc'
          },
          {
          title: '操作',
          width: '120px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        },
        ],
        parameter: {
          pageNo: 1,
          pageSize: 10
        },
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          if (this.selectMenu.yx.length > 0) {
            this.parameter = parameter
            parameter.pageNum = parameter.pageNo
            let params = Object.assign({}, this.queryParam, parameter)
            if (params.byny) {
              params.bynyStart = params.byny[0].format('YYYY-MM-DD')
              params.bynyEnd = params.byny[1].format('YYYY-MM-DD')
              delete params.byny
            }
            return this.$api.overseas.unCheckDormInfoListGjc(params).then(res => {
              return {
                data: res.data.rows,
                pageNo: parameter.pageNo,
                pageSize: parameter.pageSize,
                totalPage: Math.ceil(res.data.total / parameter.pageSize),
                totalCount: res.data.total
              }
            })
          }
        },
        selectedRowKeys: [],
        selectedRows: [],

        // custom table alert & rowSelection
        options: {
          alert: {
            show: true, clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        optionAlertShow: true, // 是否显示alert，已选中
        visible: false,
        confirmLoading: false,
        editId: null,
        selectMenu: {
          yx: [], // 院系
          zy: [] // 所属专业
        },
        initDone: false,
        batchVisible: false,
      }
    },
    computed: {
      ...mapState({
        TYPE0311: state => state.app['TYPE0311'], // 学业奖学金等级
        TYPE0312: state => state.app['TYPE0312'], // 助研奖学金等级
        TYPE0126: state => state.app['TYPE0126'], // 年级
        TYPE0075: state => state.app['TYPE0075'], // 学生类别
        TYPE0362: state => state.app['TYPE0362'], // 录取类别
        TYPE0064: state => state.app['TYPE0064'], // 入学方式
        // TYPE0073: state => state.app['TYPE0073'], // 学籍状态
        TYPE0015: state => state.app['TYPE0015'], // 学制
        TYPE0503: state => state.app['TYPE0503'],
        TYPE0441: state => state.app['TYPE0441'],
        TYPE0011: state => state.app['TYPE0011'],

      })
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        let pageParams = vm.$store.state.app.pageParams || {}
        if (from.path === '/student/stuStatus/search/stuView' && pageParams.path === vm.$route.path) {
          vm.queryParam = pageParams.params
          vm.parameter = pageParams.pagination
          return vm.initSelectMenu(1)
        }
        vm.initSelectMenu()
      })
    },
    beforeRouteLeave (to, from, next) {
      if (to.path === '/student/stuStatus/search/stuView') {
        this.$store.dispatch('app/setPageParams', {
          path: this.$route.path,
          params: this.queryParam,
          pagination: this.parameter
        })
      }
      next()
    },
    created() {
      this.$store.dispatch('app/setDictionary', 'TYPE0064')
      this.$store.dispatch('app/setDictionary', 'TYPE0075')
      this.$store.dispatch('app/setDictionary', 'TYPE0126')
      this.$store.dispatch('app/setDictionary', 'TYPE0311')
      this.$store.dispatch('app/setDictionary', 'TYPE0312')
      this.$store.dispatch('app/setDictionary', 'TYPE0362')
      // this.$store.dispatch('app/setDictionary', 'TYPE0073')
      this.$store.dispatch('app/setDictionary', 'TYPE0015')
      this.$store.dispatch('app/setDictionary', 'TYPE0503')
      this.$store.dispatch('app/setDictionary', 'TYPE0441')
      this.$store.dispatch('app/setDictionary', 'TYPE0011')
      this.$api.dict.queryAll({
        typeCode: 'TYPE0073',
        // notExist: "3,6,7,11,14,15,17,31"
        notExist: "6,7,11,14,15,17,31"

      }).then(res => {
        this.TYPE0073 = res.data
      })
    },
    methods: {
      initSelectMenu(notFirst = 0) {
        let allRequest = [
          this.$api.base.collegeAll(),
          this.$store.dispatch('app/sysInfo')
        ]
        Promise.all(allRequest).then(res => {
          this.selectMenu = {
            yx: res[0].data
          }
          if (this.selectMenu.yx && this.selectMenu.yx.length == 1) {
            this.$set(this.queryParam, 'ssyxm', this.selectMenu.yx[0].dwh)
            this.yxChange(this.queryParam.ssyxm)
          }
          this.initDone = true
        })
      },
      showCheck (row) {
        this.visible = true
        this.$refs.check.detail = row
        this.$nextTick(() => {
          this.$refs.check.form.resetFields()
        })
      },
      direct(data) {
        this.$router.push(`/overseas/stuStatus/search/stuView?xh=${data.xh}`)
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      filterOption(value, op) {
        return op.componentOptions.children[0].text.indexOf(value) !== -1
      },
      yxChange(code) {
        this.$set(this.queryParam, 'sszym', '')
        if (code) {
          this.$api.base.majorAll({lsdwh: code}).then(res => {
            this.$set(this.selectMenu, 'zy', res.data)
          })
        } else {
          this.$set(this.selectMenu, 'zy', [])
        }
      },
      exportExcel() {
        // if (!this.selectedRowKeys.length) {
        //   this.$message.warning('请选择需要导出的学生')
        //   return
        // }
        // this.visible = true
        this.$export('/schoolRoll/xsxx/exportDorm', {
          ...this.queryParam
        })
      },
      batchCheck(params) {
        this.$refs.batchCheckModal.confirmLoading = true
        console.log(this.selectedRows)
        let id = this.selectedRows.map(ds => {
          return ds.id
        })
        console.log(id.join(','))
        this.$api.overseas.xszssqxx(Object.assign({id: id.join(',')}, params)).then(() => {
          this.$message.success('操作成功')
          this.selectedRowKeys = []
          this.selectedRows = []
          this.visible = false
          this.$refs.table.refresh(false)
          this.$refs.table.clearSelected()
          this.$refs.batchCheckModal.form.resetFields()
        }).finally(() => {
          this.$refs.batchCheckModal.confirmLoading = false
          this.batchVisible = false
        })
      },
      batchShowCheck() {
        if (!this.selectedRowKeys.length) {
          this.$message.warning('请选择需要审核的住宿信息')
          return
        }
        this.batchVisible = true
      },

      exportDBF() {
        // if (!this.selectedRowKeys.length) {
        //   this.$message.warning('请选择需要导出的学生')
        //   return
        // }
        // this.visible = true
        this.$export('/schoolRoll/xsxx/exportdbf', {
          ...this.queryParam
        })
      },
      exportPic() {
        this.$export('/schoolRoll/xsxx/batchExpStuImg', {
          ...this.queryParam
        })
      }
    }
  }
</script>
